/* =============== Mobile Layouts ==============*/ /*
iPhone 3G/3GS 320 x 480
iPhone 3G/3GS 480 x 320
iPhone 4G 640 x 960
iPhone 4G 960 x 640
iPad 768 x 1024
iPad 1024 x 768
Google Nexus one 480 x 800
Google Nexus one 800 x 480
facebook 520 x 800
--------------------500-----700----------------------900
0-----320------480-----640------768-----800------960-----1024
---------------480---------700----------------------900
*/ /* ============================= */ /* CSS Resets */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
	border: 0;
	margin: 0;
	padding: 0
}

article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object {
	display: block
}

a img {
	border: 0
}

figure {
	position: relative
}

figure img {
	width: 100%
}

html {background-color: #374503;}

body {
	margin-left: auto;
	margin-right: auto;		
	font-size: 80%;
	/*font-family: Verdana, Helvetica, Arial, sans-serif;*/
	font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
	width: 940px;
	color: #285C00;
}

a:link {color: #9D00A8; font-weight: bold;}
a:visited {	color: #9D00A8; font-weight: bold; }
a:hover {color: #56005C; font-weight: bold; }

table td a:link {color: #9D00A8; font-weight: bold;}
table td a:visited {color: #9D00A8; font-weight: bold;}
table td a:hover {color: #56005C; font-weight: bold;}

h1, h2, h3, h4, h5, h6 { color: #6E6A05; }
h1{ font-size: 170%}
h2{ font-size: 160%}
h3{ font-size: 150%}
h4{ font-size: 140%}
h5{ font-size: 130%}
h6{ font-size: 120%}

.my-table {
	display: table;
}
.my-row {
	display: table-row;
}
.my-cell {
	display: table-cell;
	vertical-align: top;
}

/* Decorator containers */
.container {
	display: table;
}
.leftPanelContainer {
	display: table-cell;
	vertical-align: top;
}
.contentContainer {
	display: table-cell;
}
.headerContainer {
	display: table-cell;
	vertical-align: top;
}
.mainPanelContainer {
	display: table-cell;
	vertical-align: top;
}
.footerContainer {
	display: table-cell;
	vertical-align: top;
}
.rightPanelContainer {
	display: table-cell;
	vertical-align: top;
}

/* Decorator containers detail */
.container {
	width: inherit;
	background-color: white;
	border: 1px solid red;
}
.contentContainer{
	width: 750px;
	padding-left: 10px;
	border: 1px solid orange;	
}
.headerContainer {
	width: inherit;
	border: 1px solid blue;
}
.mainPanelContainer {
	width: 740px; 
	padding: 10px 10px ;
	text-align: justify;
	border: 1px solid red;
}
.leftPanelContainer {
	/* 190px */
	width: 180px;
	padding-left: 10px;
	border: 1x solid green;
	/* 
	background: #ffffff url(../images/heads1.JPG) top left repeat-y;
	 */
}
.footerContainer {
	width:  inherit;
	border: 1px solid maroon;
}

/* inner designs */
.headerInner{
	height:60px;
}
.leftInner{
	margin: 0 auto;
}
.footerInner{
	height:60px;
}
.mainPanelInner {
}



/*--------------  mobile  --------------*/ 
@media only screen and (max-width: 481px) {
	body {
		width: 100%;
		font-size: 100%;
		/*
		margin-left: inherit;
		margin-right: inherit;
		*/		
	}
	
	/*
	container
	headerContainer
	contentContainer
	leftPanelContainer
	mainPanelContainer
	footerContainer
	*/
	
	/* Decorator containers detail */
	.container {
		width: 100%;
		background-color: white;
		border: 1px solid red;
	}
	.contentContainer{
		padding-left: 0px;	
		width: 100%;
		border: 1px solid orange;		
	}
	.headerContainer {
		/*width: 100%;*/
		border: 1px solid blue;
	}
	.mainPanelContainer {
		/*width: 100%;*/ 
		/*padding: 10px 10px ; */
		text-align: justify;
		border: 1px solid red;
	}
	.leftPanelContainer {
		display: none;
	}
	.footerContainer {
		/*width: 100%;*/
		border: 1px solid maroon;
	}
	
	/* inner designs */
	.headerInner{
	    width: 100%;
		height:140px;
		background-color: red;
	}
	.footerInner{
	    width: 100%;
	}
	.mainPanelInner {
	    width: 100%;
	}

}

